<extend name="Base/common" />

<block name="style">
	<link rel="stylesheet" href="__CSS__/User/joinact.css" />
</block>

<block name="body">
	<input hidden="hidden" value="{$act.id}" id="aid" name="aid"/>
	<div class="pref">
		<div class="pref-row">
			<div class="text-align-center col-xs-12 col-md-12 p0">
				<img src="{$act.theme}" class="col-xs-12 col-md-5 pref-img p0">
			</div>
		</div>
		<h1 class="pref-title">{$act.title}</h1>
	</div>
	<div class="text-align-center" style="margin: 0.5rem 0 0.4rem 0;">
		<if condition="$act['jointype'] eq 3">
			<button type="button" class="btn btn-primary typebtn" name="type" id="one_type" value="one">个人表演</button>
			<button type="button" class="btn btn-default typebtn" name="type" id="team_type" value="team">团队表演</button>
			<!--<select id="type" name="type" style="height: 1.5rem;border-radius: 5px;">
				<option value="one">个人表演</option>
				<option value="team">团队表演</option>
			</select>-->
		</if>
		<if condition="$act['jointype'] eq 2">
			<button type="button" class="btn btn-primary typebtn" name="type" id="team_type" value="team">团队表演</button>
			<!--<select id="type" name="type" style="height: 1.5rem;border-radius: 5px;">
				<option value="team">团队表演</option>
			</select>-->
		</if>
		<if condition="$act['jointype'] eq 1">
			<button type="button" class="btn btn-primary typebtn" name="type" id="one_type" value="one">个人表演</button>
			<!--<select id="type" name="type" style="height: 1.5rem;border-radius: 5px;">
				<option value="one">个人表演</option>
			</select>-->
		</if>
	</div>
	<div class="perinfo" id="perinfo">
		<div id="oneper" class="oneper">
			<h4 class="text-align-center">表演者</h4>
			<input class="form-control" name="onename" id="onename" value="{$user.nickname}" placeholder="个人姓名" style="margin-bottom: 0.3rem;" />
			<input class="form-control" name="onephone" id="onephone" value="{$user.phone}" maxlength="11" placeholder="手机号码" />
		</div>
		<div id="teamper" class="teamper" hidden="hidden">
			<h4 class="text-align-center">表演团队</h4>
			<div>
				<input class="form-control" value="{$band[0].bandname}" name="bandname" id="bandname" placeholder="乐队名" style="margin-bottom: 0rem;" />
				<select hidden="hidden" name="select_bandname" id="select_bandname" class="band-select">
					<notempty name="band">
						<foreach name="band" item="v">
							<option value="{$v.bandname}">{$v.bandname}</option>
						</foreach>
						<else/>
						<option value="无">无</option>
					</notempty>
				</select>
				<button class="btn btn-primary" id="userband">常用乐队</button>
			</div>
			<hr class="hr" />
			<input class="form-control" name="teamname" id="teamname" value="{$user.nickname}" placeholder="联系人姓名" style="margin-bottom: 0.3rem;" />
			<input class="form-control" name="teamphone" id="teamphone" value="{$user.phone}" maxlength="11" placeholder="手机号码" />
			<hr class="hr" />
			<div>
				表演人数:
				<select id="number" name="number" style="width:50%;">
					<option value="1">1人</option>
					<option value="2">2人</option>
					<option value="3">3人</option>
					<option value="4">4人</option>
					<option value="5">5人</option>
					<option value="6">5人以上</option>
				</select>
			</div>
		</div>
	</div>
	<div class="instru" id="instru">
		<div class="text-align-center">
			<h4 id="intitle">选择表演乐器(可多选)</h4>
		</div>
		<foreach name="instru" item="v">
			<div class="instru-img-div" onclick="select(this)">
				<img src="{$v.imgurl}" data-id="{$v.instrumentid}" class="instru-img" />
			</div>
		</foreach>
	</div>
	<div id="music" class="music" hidden="hidden">
		<h4 class="text-align-center">表演歌曲</h4>
		<div class="mb10">
			<input class="form-control musicname" name="music1" id="music1" placeholder="歌曲1" />
			<select name="mtype1" id="mtype1">
				<option value="原创">原创</option>
				<option value="翻唱">翻唱</option>
				<option value="改编">改编</option>
			</select>
		</div>
		<div class="mb10">
			<input class="form-control musicname" name="music2" id="music2" placeholder="歌曲2" />
			<select name="mtype2" id="mtype2">
				<option value="原创">原创</option>
				<option value="翻唱">翻唱</option>
				<option value="改编">改编</option>
			</select>
		</div>
		<div>
			<input class="form-control musicname" name="music3" id="music3" placeholder="歌曲3" />
			<select name="mtype3" id="mtype3">
				<option value="原创">原创</option>
				<option value="翻唱">翻唱</option>
				<option value="改编">改编</option>
			</select>
		</div>
	</div>
	<div class="text-align-center mt10 mb10" hidden="hidden" id="finbtn">
		<button class="btn btn-success" type="button" id="finish">完成</button>
	</div>
	<div class="text-align-center mt10 mb10">
		<button class="btn btn-primary" id="next">下一步</button>
	</div>
</block>

<block name="script">
	<script src="__JS__/User/joinact.js"></script>
	<script>
		var bandnametype = 'bandname';//乐队名字   是手动输入的呢  还是下拉选择的
		//完成按钮点击
		$("#finish").click(function(){
			var aid = $('#aid').val(),
				onename = $('#onename').val(),
				onephone = $('#onephone').val(),
				bandname = $('#bandname').val(),
				select_bandname = $('#select_bandname').val(),
				teamname = $('#teamname').val(),
				teamphone = $('#teamphone').val(),
				number = $('#number').val(),
				m1 = $('#music1').val(),
				m2 = $('#music2').val(),
				m3 = $('#music3').val(),
				mt1 = $('#mtype1').val(),
				mt2 = $('#mtype2').val(),
				mt3 = $('#mtype3').val(),
 				instrus = $('.active');//记录页面中所有选择到的乐器的DOM元素
 				console.log(type);
			var instru = [];//记录所有选中乐器ID
			for(var i=0;i<instrus.length;i++){
				instru[i] = $(instrus[i]).attr('data-id');
			}
			if(!$("#music1").val() && !$("#music2").val() && !$("#music3").val()){
				$("#music1").focus();
				return false;
			}else{
				var info = {aid:aid,number:number,instru:instru,m1:m1,m2:m2,m3:m3,mt1:mt1,mt2:mt2,mt3:mt3};
				//组装数据送达后台
				if(type=='one'){
					info.type = '个人表演';
					info.name = onename;
					info.phone = onephone;
				}else{
					info.type = '团队表演';
					info.bandname = bandname;
					info.select_bandname = select_bandname;
					info.bandnametype = bandnametype;
					info.name = teamname;
					info.phone = teamphone;
				}
				$.post("{:U('User/join_act')}",info,function(res){
					location.href="__ROOT__/User/share/aid/"+res.aid;
				});
			}
		});
		//常用乐队按钮
		
		$('#userband').click(function(){
			var ubhtml = $('#userband').html();
			if(ubhtml=="常用乐队"){
				$('#userband').html('手动输入');
				$('#bandname').hide();
				$('#select_bandname').show();
				bandnametype = 'select_bandname';
			}else{
				$('#userband').html('常用乐队');
				$('#select_bandname').hide();
				$('#bandname').show();
				bandnametype = 'bandname';
			}
		});
	</script>
</block>